import React, { Component } from 'react';
import './Mine.scss'
import { NavBar, Avatar, List } from 'antd-mobile'
import { MoreOutline } from 'antd-mobile-icons'
import tou from '../../assets/tou.webp'
import service from '../../api';

class Mine extends Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            name: ''
        }
    }

    async componentDidMount() {

        if (!localStorage.getItem('token')) {
            this.props.history.push('/login')
        }
        var res = await service.user.info({ userid: localStorage.getItem('userid') })
        console.log(res);
        this.setState({
            name: res.data.data[0].username
        })

    }
    render() {
        return (
            <div className='mine'>
                <div className="top">
                    <NavBar right={<MoreOutline onClick={() => { this.props.history.push('/set') }} style={{ fontSize: 35 }} />}>个人中心</NavBar>
                </div>

                <div className="one">
                    <div className="imgurl">
                        <Avatar src={tou} style={{ '--size': '84px', borderRadius: 50 }} />
                    </div>
                    <div className="right">
                        <span>欢迎您:
                            {this.state.name}
                        </span>
                        <p>{localStorage.getItem('tel')}</p>
                    </div>

                </div>

                <div className="main">
                    <List style={{ '--font-size': '14' }}>
                        <List.Item onClick={() => { this.props.history.push('/address') }}>地址管理</List.Item>
                        <List.Item onClick={() => { this.props.history.push('/orders') }}>订单管理</List.Item>
                        <List.Item onClick={() => { }}>我的收藏夹</List.Item>
                        <List.Item onClick={() => { }}>关于我们</List.Item>
                    </List>
                </div>
            </div >
        );
    }
}

export default Mine;